<template>
	<view class="popup " :class="[position,modelValue ? 'show' : '']" :style="{
		zIndex:zIndex,
		pointerEvents: modelValue ? 'auto' : 'none'
	}">
		<view @click="emit('update:modelValue', false)" class="mask" />
		<view class="content" :style="defaultStyle">
			<slot />
			<view v-if="isSafety" style="height: env(safe-area-inset-bottom);" />
		</view>
	</view>
</template>

<script setup>
import { computed } from "vue";
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
	modelValue: Boolean,
	customStyle: Object,
	//安全区
	isSafety: {
		type: Boolean,
		default: true
	},
	zIndex: {
		type: [Number, String],
		default: 999
	},
	//bottom | center
	position: {
		type: String,
		default: "bottom"
	},
	top: {
		type: [String, Number]
	}
})

const defaultStyle = computed(() => ({
	...props.customStyle,
	...{top: props.modelValue ? props.top + 'px' : '-100%'}
}))
</script>

<style lang="scss">
.popup {
	display: flex;
	flex-direction: column;
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;

	.mask {
		width: 100%;
		height: 100%;
		background-color: rgba(#000, .2);
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transition: opacity ease .3s;
	}

	.content {
		z-index: 1000;
		transition: all ease .3s;
	}

	&.show {
		.mask {
			opacity: 1;
		}
	}

	&.bottom {
		justify-content: flex-end;

		.content {
			transform: translate3d(0, 100%, 0);
			background-color: #ffffff;
			border-radius: 30rpx 30rpx 0 0;
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
		}
	}
	&.top {
		justify-content: flex-end;
	
		.content {
			transform: translate3d(0, 0, 0);
			background-color: #ffffff;
			position: fixed;
			top: -100%;
			width: 100%;
			left: 0;
		}
	
		&.show {
			.content {
				transform: translate3d(0, 0%, 0);
			}
		}
	}

	&.center {
		justify-content: center;

		.content {
			transform: scale(0);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&.show {
			.content {
				transform: scale(1);
			}
		}
	}
}
</style>
